<template>
    <div class="home">
        <HeaderBar @onsearch="onsearch"  @createNote="createNote"></HeaderBar>
        <!-- 笔记列表 -->
        <!-- <NoteItem></NoteItem> -->
        <div id="notes" class="container">
            <div class="note_container" v-for="item in noteList" :key="item._id">
                <NoteBox :item="item"  @editNote="editNote" @delNote="getNoteList"></NoteBox>
            </div>
        </div>
		<!--   分页 -->
        <div class="page container" >
             <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="pageNum"
                @current-change="pageChange"
                >
                </el-pagination>
        </div>

        <!--- 新建或编辑 -->
        <CreateEditor ref="CreateEditor" @success="getNoteList"></CreateEditor>
    </div>
</template>
<script>
    //import NoteItem from "@/components/NoteItem";
    import HeaderBar from "@/components/HeaderBar";
    import NoteBox from "@/components/NoteBox";
    import CreateEditor from "@/components/Create_editor";
    const fileAddr =  process.env.VUE_APP_fileAddr;
    export default {
        name: "home",
        components: {HeaderBar,NoteBox,CreateEditor},
        data() {
            return {
                noteList:[],
                currNote:null, // 当前编辑或者修改的笔记
                pageSize: 8,
                pageNum: 1,
                total:0,
                search:{}
            }
        }, 
        mounted(){
            this.getNoteList();
        },
        methods:{
			createNote(e){
			    // 新建笔记
			    this.$refs.CreateEditor.open({
			        type:e
			    });
			},
            editNote(e){
                // 编辑笔记
                this.$refs.CreateEditor.open({
                    currentItem:e,
                    type:e.type
                });
            },     
            onsearch(e){
                // 搜索
				console.log(e)
                this.search = e;
                this.pageNum = 1;
                this.getNoteList();
            },
            pageChange(e){
                //console.log(e);
                this.pageNum = e;
                this.getNoteList();
            },  
            getNoteList() {
                this.$api.noteList({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    ...this.search,
                }).then(res => {
					//console.log(res)
					if(res.list.length > 0){
						this.noteList = this.formatNotes(res.list);
						this.total = res.count;
					}else{
						this.$message.warning("未找到您要的结果");
						return ;
					}
                })
            },
            formatNotes(list){
                list = list || [];
                for(let i = 0; i < list.length; i++){
                    let item = list[i]
                    item._updatedAt = new Date(item.updatedAt).Format("yyyy-MM-dd hh:mm");
                    if(item.type == this.$const.NOTETYPE.IMG){
                        // 为画布,需要拼接完整的地址
                        item._content = item.content;
                        item.content = fileAddr + item.content;
                    }
                }
                return list;
            }
        }
    }
</script>
<style scoped lang="scss">
.home{
    #notes {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

        .note_container {
            width: 24%;
            padding: 6px;
            height: 298px;
            }
    }
    .page{
        text-align: right;
        margin-top: 10px;
    }
}
 
</style>